<template>
  <div>
    <el-container>
      <el-header>
        <Top></Top>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <router-link to="/assessor-home" style="text-decoration: none;">
              <el-menu-item index="3" >
                <i class="el-icon-document"></i>
                <span slot="title">评审</span>
              </el-menu-item>
            </router-link>
            <router-link to="/assessor-vote" style="text-decoration: none;">
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">投票</span>
              </el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>
        <el-main>
          <el-card class="box-card" style="width: 95%;">
            <div  class="text item">
              <el-row style="display: flex;flex-direction: row;justify-content: center;">
                <el-button type="primary" style="width: 330px;height: 130px;" @click="getStudent">发起投票</el-button>
                <el-button type="primary" style="width: 330px;height: 130px;margin-left: 80px" @click="getAllVoteMeg">查看历史</el-button>
              </el-row>
            </div>

          </el-card>

        </el-main>
      </el-container>
    </el-container>
    <div>
      <el-dialog title="发布投票" :visible.sync="dialogFormVisible" >
        <el-form :model="form">
          <el-form-item label="投票信息" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="结果人数" :label-width="formLabelWidth">
            <el-input v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"></el-date-picker>
            <span>-</span>
            <el-time-picker placeholder="选择时间" v-model="form.date2"></el-time-picker>
          </el-form-item>
          <el-form-item label="结束时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.time1" ></el-date-picker>
            <span>-</span>
            <el-time-picker placeholder="选择时间" v-model="form.time2" ></el-time-picker>
          </el-form-item>
        </el-form>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="可参加投票人员" name="1">
            <div v-for="i in student" :key="i">
              <span style="margin-right: 50px;">{{i.name}}</span>
              {{i.studentId}}
            </div>
          </el-collapse-item>
        </el-collapse>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click=addVote >提 交</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      title="历史信息"
      :visible.sync="centerDialogVisible"
      center>
      <el-collapse v-model="activeName" @change="handChange" accordion>
        <el-collapse-item disabled>
          <template slot="title">
          <span>状态</span>
          <span style="margin-left: 100px;">信息</span>
          <span style="margin-left: 100px;">结果人数</span>
          </template>
        </el-collapse-item>
        <el-collapse-item v-for="item in voteMeg" :key="item" :name="item.id" >
          <template slot="title">
            <span>{{item.status}}</span>
            <span style="margin-left: 100px;">{{item.message}}</span>
            <span style="margin-left: 100px;">{{item.number}}</span>
          </template>
          <div>
            <span>学号</span>
            <span style="margin-left: 100px;">姓名</span>
            <span style="margin-left: 50px;">票数</span>
            <el-button type="primary" v-if="item.status=='进行中'" style="float:right" @click="offVote(item.id)">截 止</el-button>
          </div>
          <div v-for="i in vote" :key="i">
            <span>{{i.studentId}}</span>
            <span style="margin-left: 50px;">{{i.name}}</span>
            <span style="margin-left: 50px;">{{i.count}}</span>
          </div>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<script>
import Top from "@/components/welTop"

export default {
  name: "index",
  components: {
    Top
  },
  methods:{
    handleChange(val) {
      console.log(val);
    },
    getStudent(){
      this.dialogFormVisible = true
      this.$axios.get("/getVoteName").then(res=>{
        if (res.data.code===0){
          this.student = res.data.data
        }else{

        }
      })
    },
    addVote(){
      this.dialogFormVisible = false
      console.log(this.form.date1)
      console.log(this.form.date2)
      var voteJSON={
        "vote":{
          "message":this.form.name,
          "startTime":this.form.date2,
          "endTime":this.form.time2,
          "number":this.form.number
        },
        "list":this.student
      }
      console.log(voteJSON)
      this.$axios.post("/addVote",voteJSON).then(res=>{
        console.log(res)
      })
    },
    getAllVoteMeg(){
      this.centerDialogVisible = true
      this.$axios.get("/getAllVoteMeg").then(res=>{
        this.voteMeg=res.data.data
      })
    },
    handChange(val){
      console.log(val)
      this.$axios.post("/getOneVote/"+val).then(res=>{
        this.vote=res.data.data
      })
    },
    offVote(v){
      this.$axios.post("/offVote/"+v).then(res=>{
        console.log(res)
      })
    }
  },
  data() {
    return {
      activeName: '1',
      centerDialogVisible: false,
      gridData: [],
      student:[{
        name:"无可参与投票人员",
        studentId:"12"
      }],
      voteMeg: [],
      vote:[],
      activeNames: ['0'],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        time1:'',
        time2:'',
        number:'',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',

    };

  }
}
</script>

<style scoped>

</style>

<style>
.el-header, .el-footer {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 17px;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #EEE;
  color: #333;
  text-align: left;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
